<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table'

import { ref } from 'vue'

import { Page } from '@vben/common-ui'

import { Input } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { DataUpholdLog } from '#/api/dataUpholdLog'

const alertTxt = ref('')
const formOptions: any = {
  collapsed: true,
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  wrapperClass: 'grid-cols-5',
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'goods*goods_no',
      label: '货号',
      operator: '=',
    },

    {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '成品档案',
            value: 'scm_goods',
          },
          {
            label: '生产计划',
            value: 'pre_product_plan',
          },
        ],
      },
      fieldName: 'table_name',
      operator: '=',
      label: '数据源',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '模糊搜索',
      },
      fieldName: 'createAdmin*realname',
      label: '创建人',
      operator: '=',
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
}
const gridOptions: VxeTableGridOptions = {
  checkboxConfig: {
    highlight: true,
    trigger: 'row',
  },
  height: 'auto',
  columns: [
    { title: '货号', field: 'goods.goods_no', align: 'center' },
    {
      title: '数据源',
      field: 'table_name',
      width: 100,
      cellRender: {
        name: 'CellTag',
        options: [
          {
            color: 'success',
            label: '成品档案',
            value: 'scm_goods',
          },
          { color: 'error', label: '生产计划', value: 'pre_product_plan' },
        ],
      },
    },
    { title: '类型', field: 'title', align: 'center' },
    { title: '内容', field: 'content_str', align: 'center', width: 600 },
    { title: '备注', field: 'mark', align: 'center' },
    { title: '创建人', field: 'createAdmin.realname', align: 'center' },
    { title: '创建时间', field: 'created_at', align: 'center' },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const search = await gridApi.formApi.getFiltersValues()
        const res = await DataUpholdLog({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
          search,
        })
        alertTxt.value = res.remark
        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },
  id: 'dataUpholdLog',
  customConfig: {
    storage: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
})

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="通过货号模糊搜索" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
    </Grid>
  </Page>
</template>
<style lang="scss" scoped></style>
